<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>唯爱薇o朝圣之路 事件绑定 详解</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>

    <div id="app">



    </div>
    

</body>
<script>
    const app= Vue.createApp({ 
        data() {
            return {
                isShowFlag: true,
                classValue: 'red',
                //多个class属性生效以对象的形式
                classValues: {red:false, background:true},
                //多个class属性生效以数组的形式
                classArray: ['green','background',{red:false}],
                //以字符串的行式给行内样式赋值
                styleStr: 'color:blue',
                //以对象的形式给行内样式赋值 
                styleObj: {
                    color: 'red',
                    background: 'yellow'
                },
                message: "唯爱薇o朝圣之路！",
                count: 0
            }
        },
        methods: {
            manualExecute() {
                alert("manualExecute ：edu_vlovev_cn 手动弹窗显示")
            },
            manualCounters(event,num) {
                this.count+= num
                console.log('当前的event：'+ event)
                console.log(event)
            }
        },
        mounted(){
            //alert('autoExecute 自动弹窗显示')
        },
        //这里的class="background"属性只能传递一级,如没有外层的div标签,则对里面的多个标签时不生效
        template:`
            <h2 v-on:click="manualExecute" :class="classArray"> 手动点击：{{ message }} </h2>
            <h2 v-on:click="manualExecute" :style="styleStr"> 手动点击：{{ message }} </h2>
            <h2 v-on:click="manualExecute" :style="classValues"> 手动点击：{{ message }} </h2>
            <h2 v-on:click="manualExecute" :style="styleObj"> 手动点击：{{ message }} </h2>
            <hr />
            <h2>当前手动计数为：{{ count }}  </h2>
            <button @click="manualCounters($event,3)">手动点击计数</button>
            <button @click="manualCounters($event,3),manualExecute()">计数且弹窗,一次性触发两个动作</button>
            <box01  class="background"/>
            <box02 :isShowFlag="isShowFlag"/>
        `

    }
    )
    app.component("box01",{
        //style="color:orange"为行内样式写法
        template:`
            <div>
                <div class="red"> box01: 我是子组件盒子1 </div>
                <div style="color:orange"> box01: 我是子组件盒子1 </div>
            </div>
        `
    })
    app.component("box02",{
        //style="color:orange"为行内样式写法
        props:['isShowFlag'],
        template:`
            <div>
                <div v-show="isShowFlag" > box02: 我是子组件盒子2 {{ isShowFlag }}</div>
                <div> box02: 我是子组件盒子2  isShowFlag的数据类型为：{{typeof isShowFlag }}</div>
                <div style="color:red"> box02: 我是子组件盒子2 </div>
            </div>
        `
    })    
    const vm = app.mount("#app")
</script>
<style>
    .red {color:red !important;}
    .green {color:green;}
    .background {background-color:gray;}
</style>
</html>